<template>
  <div ref="formPage" class="form-page">
    <div ref="formTop" class="form-top">
      <Card>
        <slot name="top" />
      </Card>
    </div>
    <div ref="formContent" class="form-content">
      <div class="form-btns">
        <a-space>
          <slot name="btns" />
        </a-space>
      </div>
      <slot name="content" />
    </div>
    <slot name="pagination" />
  </div>
</template>

<script>
export default {
  name: "TemplistVarchar",
};
</script>

<style lang="scss" scoped>
.form-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  height: calc(100vh - 120px);
  .form-btns {
    margin-bottom: 10px;
  }
  .form-content {
    flex-grow: 1;
    overflow: hidden;
    flex-shrink: 1;
  }
}
</style>
